<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 1. 导入vue的包 -->
    <script src="./lib/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  </head>
  <body>
    <!-- 将来new的vue实例会控制这个元素中的所有内容 -->
    <!-- vue所控制的这个元素的区域,就是v -->
    <div id="app">
      <p>{{msg}}</p>
    </div>

    <script>
      // 2. 创建一个vue的实例
      // 当我们导包后浏览器的内存中就多了vue的实例
      // new出来的这个vm对象就是mvvm的vm调度者
      var vm = new Vue({
        el: '#app',  // 表示当前new的这个vue实例要控制的哪个区域
        // 这里的data就是mvvm的m,专门用来保存页面的数据
        data: { // data属性中存放的是el中要用到的数据
          msg: '欢迎学习vue' // 通过vue提供的指令,把数据渲染到页面上
        }
      })

    </script>
  </body>
</html>
